import {PageContainer} from "@ant-design/pro-layout";
import {StatisticCard} from "@ant-design/pro-card";
import ProTable from "@ant-design/pro-table";
import { integralCordata, integralJournal} from "@/services/ant-design-pro/marketing";
import {Card} from "antd";
import {useEffect, useState} from "react";

const Log = () => {
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      align: 'center',
      search: false,
    },
    {
      title: '标题',
      dataIndex: 'title',
      align: 'center',
    },
    {
      title: '变动前积分',
      dataIndex: 'front_integral',
      align: 'center',
      search: false
    },
    {
      title: '积分变动',
      dataIndex: 'get_points',
      align: 'center',
      search: false
    },
    {
      title: '备注',
      dataIndex: 'remarks',
      align: 'center',
      search: false
    },
    {
      title: '用户微信名称',
      dataIndex: 'user',
      align: 'center',
      search: false,
      render: (_,record)=>{
        return <span>{record.user.nickname}</span>
      }
    },
    {
      title: '添加时间',
      dataIndex: 'created_at',
      align: 'center',
      search: false
    },
    {
      title: '选择时间',
      dataIndex: 'created_at',
      hideInTable: true,
      valueType: 'dateRange',
      initialValue: ''
    }
  ]
  const imgStyle = {
    display: 'block',
    width: 42,
    height: 42,
  };
  // 指示卡
  const [indicatorCard,setIndicatorCard] = useState([])

  useEffect(async ()=>{
    const cordData = await integralCordata()
    setIndicatorCard(cordData)
  }, [])
  return (
    <PageContainer
      header={{breadcrumb: {}}}
    >
      <div style={{marginBottom: '20px',display:'flex',justifyContent: 'space-between'}}>
        <StatisticCard
          style={{width: '300px'}}
          statistic={{
            title: '总积分(个)',
            value: indicatorCard.integral_num,
            icon: (
              <img
                style={imgStyle}
                src="https://gw.alipayobjects.com/mdn/rms_7bc6d8/afts/img/A*dr_0RKvVzVwAAAAAAAAAAABkARQnAQ"
                alt="icon"
              />
            ),
          }}
        />
        <StatisticCard
          style={{width: '300px'}}
          statistic={{
            title: '客户签到次数(次)',
            value: indicatorCard.signs,
            icon: (
              <img
                style={imgStyle}
                src="https://gw.alipayobjects.com/mdn/rms_7bc6d8/afts/img/A*-jVKQJgA1UgAAAAAAAAAAABkARQnAQ"
                alt="icon"
              />
            ),
          }}
        />
        <StatisticCard
          style={{width: '300px'}}
          statistic={{
            title: '签到送出积分(个)',
            value: indicatorCard.signs_integral,
            icon: (
              <img
                style={imgStyle}
                src="https://gw.alipayobjects.com/mdn/rms_7bc6d8/afts/img/A*-jVKQJgA1UgAAAAAAAAAAABkARQnAQ"
                alt="icon"
              />
            ),
          }}
        />
        <StatisticCard
          style={{width: '300px'}}
          statistic={{
            title: '使用积分(个)',
            value: indicatorCard.use_num,
            icon: (
              <img
                style={imgStyle}
                src="https://gw.alipayobjects.com/mdn/rms_7bc6d8/afts/img/A*-jVKQJgA1UgAAAAAAAAAAABkARQnAQ"
                alt="icon"
              />
            ),
          }}
        />
      </div>
      <Card>
        <ProTable
          columns={columns}
          request={async (params) => {
            let {data,meta} =  await integralJournal({...params})
            return{
              data,
              success:true,
              total:meta.pagination.total
            }
          }}
          editable={{
            type: 'multiple',
          }}
          rowKey="id"
          search={{
            labelWidth: 'auto',
            defaultCollapsed: false,
            collapseRender: false,
          }}
          form={{
            // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
            syncToUrl: (values, type) => {
              if (type === 'get') {
                return {
                  ...values,
                  created_at: [values.startTime, values.endTime],
                };
              }
              return values;
            },
          }}
          pagination={{
            pageSize: 10,
          }}
          dateFormatter="string"
          toolBarRender={() => [

          ]}
        />
      </Card>
    </PageContainer>
  );
};

export default Log;
